<div id="participant-devices" class="panel__page participant-devices" data-bind="with: $root.participantDevices">
  <!-- ko if: isVisible() -->
    <div class="panel__header">
      <arrow-left-icon class="icon-button" data-bind="click: clickOnBack" data-uie-name="go-back-participant-devices"></arrow-left-icon>
      <!-- ko if: !showDeviceDetails() && !showSelfFingerprint() -->
        <div class="panel__header__title" data-bind="text: z.string.participantDevicesHeader"></div>
      <!-- /ko -->
      <!-- ko if: showSelfFingerprint() -->
        <div class="panel__header__title" data-bind="text: z.string.participantDevicesSelfFingerprint"></div>
      <!-- /ko -->
      <!-- ko if: showDeviceDetails() -->
        <!-- ko if: userEntity().is_me -->
          <div class="panel__header__title" data-bind="text: selectedClient().label || selectedClient().model"></div>
        <!-- /ko -->
        <!-- ko ifnot: userEntity().is_me -->
          <div class="panel__header__title" data-bind="text: z.util.StringUtil.capitalize_first_char(selectedClient().class)"></div>
        <!-- /ko -->
      <!-- /ko -->
      <close-icon class="icon-button" data-bind="click: clickOnClose" data-uie-name="do-close"></close-icon>
    </div>

    <div class="panel__content">
      <div class="panel__content__scroll" data-bind="antiscroll: shouldUpdateScrollbar">
        <!-- ko if: showDevicesFound() -->
          <div class="participant-devices__header">
            <div class="participant-devices__text-block" data-bind="text: devicesHeadlineText"></div>
            <a class="participant-devices__link" data-bind="attr: {href: z.util.URLUtil.build_url(z.util.URLUtil.TYPE.WEBSITE, z.config.URL_PATH.PRIVACY_WHY)}, l10n_text: z.string.participantDevicesWhyVerify" rel="nofollow noopener noreferrer" target="_blank" class="text-theme"></a>
          </div>

          <div class="participant-devices__device-list" data-bind="foreach: clientEntities()">
            <div class="participant-devices__device-item" data-bind="click: $parent.clickOnDevice" data-uie-name="item-device">
              <svg class="participant-devices__device-item__icon" width="16" height="16">
                <!-- ko if: meta.isVerified()-->
                  <use data-uie-name="user-device-verified" xlink:href="#icon-verified"></use>
                <!-- /ko -->
                <!-- ko ifnot: meta.isVerified()-->
                  <use data-uie-name="user-device-not-verified" xlink:href="#icon-not-verified"></use>
                <!-- /ko -->
              </svg>
              <device-card params="device: $data, click: $parent.clickOnDevice"></device-card>
            </div>
          </div>
        <!-- /ko -->

        <!-- ko if: showDevicesNotFound() -->
          <div class="participant-devices__header">
            <div class="participant-devices__text-block" data-bind="text: noDevicesHeadlineText"></div>
            <a class="participant-devices__link" data-bind="l10n_text: z.string.participantDevicesLearnMore, l10n_href: {type: z.util.URLUtil.TYPE.WEBSITE, path: z.string.urlWebsitePrivacy}" rel="nofollow noopener noreferrer" target="_blank" class="text-theme"></a>
          </div>
        <!-- /ko -->

        <!-- ko if: showDeviceDetails() -->
          <div class="participant-devices__header">
            <div class="participant-devices__link participant-devices__show-self-fingerprint text-theme" data-bind="click: clickToShowSelfFingerprint, l10n_text: z.string.participantDevicesDetailShowMyDevice"></div>
            <div data-bind="foreach: detailMessage"><span class="participant-devices__text-block" data-bind="css: {'participant-devices__text-block--highlight': $data.isStyled}, text: $data.text"></span></div>
            <a class="participant-devices__link" data-bind="attr: {href: z.util.URLUtil.build_url(z.util.URLUtil.TYPE.WEBSITE, z.config.URL_PATH.PRIVACY_HOW)}, l10n_text: z.string.participantDevicesDetailHowTo" rel="nofollow noopener noreferrer" target="_blank" class="text-theme"></a>

          <device-card class="participant-devices__single-client" params="device: selectedClient()"></device-card>
          <div class="participant-devices__fingerprint" data-bind="foreach: fingerprintRemote()" data-uie-name="status-fingerprint">
            <span class="participant-devices__fingerprint__part" data-bind="text: $data"></span>
          </div>

          <div class="participant-devices__verify">
            <div class="slider" data-uie-name="do-toggle-verified">
              <input class="slider-input" type="checkbox" name="toggle" id="toggle" data-bind="checked: selectedClient().meta.isVerified">
              <label class="button-label" for="toggle" data-bind="click: clickToToggleDeviceVerification, l10n_text: z.string.participantDevicesDetailVerify"></label>
            </div>
            <div>
              <svg class="svg-theme spin" data-bind="style: {visibility : isResettingSession() ? 'visible' : 'hidden'}" width="16" height="16"
                viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-uie-name="status-loading">
                <path class="fill-theme" d="M12.416 12.417c-2.374 2.375-6.28 2.33-8.72-.112-2.444-2.442-2.488-6.347-.113-8.72 1.658-1.66 4.12-2.18 6.343-1.394.477.17 1-.08 1.17-.557.167-.477-.083-1-.56-1.17C7.658-.552 4.453.124 2.286 2.29-.808 5.384-.75 10.448 2.4 13.6c3.15 3.152 8.216 3.21 11.312.113 2.165-2.166 2.84-5.37 1.824-8.25-.168-.476-.692-.726-1.17-.558-.476.17-.726.692-.557 1.17.784 2.222.265 4.684-1.394 6.342z"></path>
              </svg>
              <span class="button-label text-theme"
                    data-bind="click: clickToResetSession, style: {visibility: !isResettingSession() ? 'visible' : 'hidden'}, l10n_text: z.string.participantDevicesDetailResetSession"
                    data-uie-name="do-reset-session"></span>
            </div>
          </div>
        </div>
        <!-- /ko -->

        <!-- ko if: showSelfFingerprint()-->
          <div class="participant-devices__header">
            <device-card params="device: selfClient()"></device-card>
            <div class="participant-devices__fingerprint" data-bind="foreach: fingerprintLocal()">
              <span class="participant-devices__fingerprint__part" data-bind="text: $data"></span>
            </div>
            <div>
              <span class="participant-devices__link text-theme" data-bind="click: clickOnShowSelfDevices, l10n_text: z.string.participantDevicesSelfAllDevices"></span>
            </div>
          </div>
        <!-- /ko -->
      </div>
    </div>
  <!-- /ko -->
</div>
